<template>
    <div class="cmt_container">
        <h3>{{photoInfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间:{{photoInfo.add_time |dataFormat}}</span>
            <span>
                点击：{{photoInfo.click}} 次
            </span>
        </p>
        <hr>
        <!-- 缩略图 -->
        <div class="tums">
            <vue-preview :slides="slide1" @close="handleClose"  ></vue-preview>
        </div>

        <div class="content" v-html="photoInfo.content"></div>

        <!-- 评论子组件 -->
        <cmt_bbo :id="this.id"></cmt_bbo>
    </div>
</template>
<script>
import comment from "../subcomponent/comment.vue"
export default {
    data(){
        return {
            id:this.$route.params.id,
            photoInfo:{},
            slide1:[]
        }
    },
    created(){
        this.getphotoInfo();
        this.getThums();
    },
    methods:{
        getphotoInfo(){
            this.$http.get("api/getimageInfo/"+this.id).then(result=>{
                if(result.body.status===0){
                    this.photoInfo = result.body.message[0]
                }
            })
        },
        getThums(){
            this.$http.get("api/getthumimages/"+this.id).then(result => {
                if(result.body.status===0){

                   result.body.message.forEach(element => {
                       element.w = 600;
                       element.h = 400;
                       element.msrc = element.src
                   });
                   this.slide1 = result.body.message;

                }
            })
        },
        handleClose () {
            console.log('close event')
        }
    },
    components:{
        "cmt_bbo":comment
    }

}
</script>
<style lang="scss" scoped>
    .cmt_container{
        h3{
            color:blue;
            font-size:14px;
            margin:15px;
            text-align: center;
        }
        .subtitle{
            display:flex;
            justify-content: space-between;
        }
 
    
    }
</style>